<template>
  <div ref="container" class="container">
    <el-space alignment="flex-start">
      <el-scrollbar>
        <div class="tree" justify="space-between" :style="{ width: treeWidth + 'px' }" ref="treeRef">
          <Tree :treeData="treeData" nodeKey="pathName" :currentNodeKey="curKey" @handleNodeClick="handleNodeClick" v-model:isExpand="isExpand" />
        </div>
      </el-scrollbar>
      <el-scrollbar>
        <div class="queryList subject" :style="{ width: queryListWidth + 'px' }" ref="list" v-loading="loading">
          <el-scrollbar>
            <QueryPage :curKey="curKey" v-model:loading="loading"/>
          </el-scrollbar>
        </div>
      </el-scrollbar>
    </el-space>
  </div>
</template>
<script setup name="dataLoaderSubject">
import Tree from '@/components/Tree'
import { treeData } from '@/views/businessManage/common/propertyTree'
import QueryPage from './components/queryPage.vue'
import useTreeSpace from '@/hooks/useTreeSpace'

const router = useRouter()
const route = useRoute()
const loading = ref(true)

const isExpand = ref(true)
const treeWidth = computed(() => isExpand.value ? 240 : 20)
const { container, treeRef, queryListWidth} = useTreeSpace(treeWidth.value)

const handleNodeClick = (data, node) => {
  if (node.level == 2) {
    if (data.pathName !== route.name) {
      loading.value = true
      router.push({ path: '/businessManage/dataLoader/subject/otherData', query: { ...route.query, curKey: data.pathName } })
    }
  }
}

const curKey = ref('')
watch(() => route.query.curKey, () => {
  curKey.value = route.query.curKey
}, { deep: true, immediate: true })
</script>
<style lang="scss" scoped>
.container {
  height: 100%;

  .el-space {
    height: 100%;
    width: 100%;

    &>:deep(.el-space__item) {
      height: 100%;

      &:last-of-type {
        width: calc(100% - 250px);
        overflow: auto;
      }
    }

    .tree,
    .queryList {
      display: inline-block;
    }

    .tree {
      width: 250px;
    }

    .queryList {
      width: calc(100% - 10px);
    }
  }

  :deep(.el-space.upload-space) {
    width: 100%;

    .el-space__item {
      width: 100%;
    }
  }
  :deep(.el-space.space-width100){
    .el-space__item{
      width: 100%;
    }
  }
}
</style>
